<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>糖卡会员店</title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		
		header {
			background: url(img/indeximg/headback.png);
			height: 1.9rem;
			width: 100%;
			background-size: 100% 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		header img {
			width: 3.47rem;
			display: block;
		}
		
		img {
			display: block;
		}
		
		.card {
			background: url(img/indeximg/conback.png);
			background-size: 100% 100%;
			width: 100%;
			padding-top: 8px;
			margin-top: -8px;
		}
		
		.content {
			background: url(img/indeximg/back.png);
			width: 100%;
			background-size: 100% 100%;
			margin-top: -1px;
			padding-top: 8px;
			padding-bottom: 2rem;
		}
		
		.con1 {
			border: 4px solid #EA3C3D;
			border-radius: 20px;
			width: 96%;
			margin: 0 auto;
			padding: 10px 0;
		}
		
		.con1>div:first-child img {
			width: 2.18rem;
			margin: 0 auto;
			padding-bottom: 10px;
		}
		
		.con1>div:nth-child(2) {
			background: #fff;
			width: 98%;
			margin: 0 auto;
			border-radius: 6px;
			text-align: center;
		}
		
		.con1>div:nth-child(2)>div:nth-child(1) img {
			width: 90%;
			margin: 0 auto;
			padding: 10px 0;
		}
		
		.con1>div:nth-child(2)>div:nth-child(2) img {
			width: 2rem;
			margin: 0 auto;
		}
		
		.con1>div:nth-child(2)>div:nth-child(3) {
			font-size: 0.2rem;
			color: #BD7B13;
			margin: 0 auto;
			padding: 10px 0;
		}
		
		.red {
			color: #F31212;
		}
		
		.mony {
			background: linear-gradient(0deg, rgba(247, 222, 163, 1), rgba(255, 230, 172, 1));
			font-size: 0.28rem;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 20px 0;
			width: 98%;
			margin: 0 auto;
			border-radius: 8px;
			margin-top: 4px;
		}
		
		.mony>div:first-child>div {
			padding: 3px 0;
		}
		.mony>div:first-child span{
			padding-left: 0.2rem;
		}
		.mony>div:last-child {
			text-align: center;
			font-family: YuppySC-Regular;
			font-weight: bold;
		}
		
		.mony>div:last-child>div:last-child {
			font-size: 0.38rem
		}
		
		.ka {
			background: url(img/indeximg/kaback.png);
			background-size:100% 100%;
			text-align: center;
			color: #fff;
		}
		.ka>.tit{
			font-size: 0.3rem;
			padding-top: 0.34rem;
		}
		.ka>div:nth-child(2){
			font-size: 0.2rem;
			display: flex;
			margin: 0 auto;
			margin-top:0.4rem;
			text-align: left;
			width: 96%;
			justify-content: space-between;
		}
		.ka>div:nth-child(2)>div>div{
			padding-bottom: 0.02rem;
		}
		.ka>div:nth-child(2) img{
			width: 3rem;
		}
		.ka span{
			color: #FFFC9F;
			font-size: 0.3rem;
		}
		.ka>div:nth-child(2)>div>div>span:first-child{
			padding-right: 0.1rem;
		}
		.bz{
			text-align: center;
			margin-top: 0.4rem;
		}
		.bz>div:first-child img{
			width: 100%
		}
		.bz>div:nth-child(2){
			display: flex;
			justify-content: space-around;
			margin-top: 0.4rem;
			margin-left: 3.5%;
			width: 90%;
			
		}
		.bz>div:nth-child(2) img{
			width: 1.53rem;
			height: 1.79rem;
		}
		.AD{
			margin-top: 0.4rem;
		}
		.AD img{
			width: 100%;
		}
		.ma{
			position: relative;
			margin-top: 0.3rem;
		}
		
		.ma img:first-child{
			width: 2.33rem;
			margin: 0 auto;
		}
		.ma img:nth-child(2){
			width: 4.13rem;
			margin: 0 auto;
			margin-top: 0.2rem;
		}
		.ma img:nth-child(3){
			width: 1.3rem;
			position: fixed;
			left: 0.1rem;
			bottom:1.5rem;
		}
		.go{
			position: fixed;
			width: 100%;
			justify-content: center;
			bottom: .4rem;
		}
		.go img{
			width: 5.14rem;
			margin: 0 auto;
			margin-top: 0.67rem;
		}
	</style>

	<body>
		<header>
			<img data-original="img/indeximg/headtit.png" />
		</header>
		<div class="card">
			<div class="con1">
				<div><img src="img/indeximg/titiimg.png" /></div>
				<div>
					<div><img src="img/indeximg/demoimg.png" /><img src="img/indeximg/demoimg.png" /></div>
					<div><img src="img/indeximg/huan.png" /></div>
					<div>没有喜欢的？换一组礼包试试~</div>
				</div>
				<div class="mony">
					<div>
						<div>商品金额<span>￥128</span></div>
						<div>活动特价<span>￥8</span></div>
						<div class="red">红包减免<span>￥128</span></div>
					</div>
					<div class="red">
						<div>应付金额</div>
						<div>￥0</div>
					</div>
				</div>

				<div class="ka">
					<div class="tit">赠送糖卡会员卡</div>
					<div>
						<div>
							<img data-original="img/indeximg/ka.png"/>
						</div>
						<div>
							<div><span>赚</span> 一年可赚<span>60</span>话费</div>
							<div><span>购</span> 一线大牌成本价购买</div>
							<div><span>领</span> 吃穿住行权益只要一分钱</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="content">
			<div class="bz">
				<div><img data-original="img/indeximg/bztit_icon.png"/></div>
				<div>
					<img data-original="img/indeximg/bz_icon1.png"/>
					<img data-original="img/indeximg/bz_icon2.png"/>
					<img data-original="img/indeximg/bz_icon3.png"/>
				</div>
			</div>
			
			<div class="AD">
				<img data-original="img/indeximg/AD.png"/>
			</div>
			<div class="ma">
				<img data-original="img/indeximg/card.png"/>
				<img data-original="img/indeximg/text.png"/>
				<img data-original="img/indeximg/comp.png"/>
			</div>
			
			<div class="go">
				<img src="img/indeximg/go.png"/>
			</div>
		</div>
		
	</body>
	<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/lazyload.js" type="text/javascript" charset="utf-8"></script>
	<script>
    $(function(){
        $("img").lazyload({
        	effect : "slideDown"
        });
    })
</script>
</html>